<template>
    <div class="chushe">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>项目审批</el-breadcrumb-item>
            <el-breadcrumb-item>试点项目申报预审</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="serach">
            <el-form
                :inline="true"
                :model="searchForm"
                label-width="104px"
                class="serachForm"
                ref="serachForm"
            >
                <el-form-item label="项目名称">
                    <el-input v-model="searchForm.projectName" placeholder="请输入项目/规划的关键字/编号"></el-input>
                </el-form-item>
                <el-form-item label="资金来源">
                    <el-select clearable v-model="searchForm.capitalSource" placeholder="选择资金来源">
                        <el-option label="民政局" value="民政局"></el-option>
                        <el-option label="公安局" value="公安局"></el-option>
                        <el-option label="财政局" value="财政局"></el-option>
                        <el-option label="国税局" value="国税局"></el-option>
                        <el-option label="土地局" value="土地局"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="审批状态">
                    <el-select clearable v-model="searchForm.currentState" placeholder="选择审批状态">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="计划时间">
                    <el-date-picker
                        clearable
                        v-model="searchTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="项目类型">
                    <el-select
                        clearable
                        v-model="searchForm.projectCategoryName"
                        placeholder="选择项目类型"
                    >
                        <el-option label="全市发展规划" value="1"></el-option>
                        <el-option label="专项发展规划" value="2"></el-option>
                        <el-option label="软件开发" value="3"></el-option>
                        <el-option label="系统集成" value="4"></el-option>
                        <el-option label="民政局" value="5"></el-option>
                        <el-option label="公安局" value="6"></el-option>
                        <el-option label="财政局" value="7"></el-option>
                        <el-option label="国税局" value="8"></el-option>
                        <el-option label="土地局" value="9"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="serachBtn">
                <el-button-group>
                    <el-button @click="getList()" type="primary">查询</el-button>
                    <el-button type="plain" @click="resetForm('serachForm')">重置</el-button>
                </el-button-group>
            </div>
        </div>
        <div class="container">
            <div class="addBtn">
                <el-button @click="add" type="primary" icon="el-icon-plus">新增</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%" @sort-change="onSortChange">
                <el-table-column prop="projectName" label="项目名称" width="200" align="center"></el-table-column>
                <el-table-column prop="projectNo" label="项目编号" width="180" align="center"></el-table-column>
                <el-table-column prop="projectBudget" sortable="custom" label="项目概算" align="center">
                    <template slot-scope="scope">
                        <span style="color: #CC3322">{{scope.row.projectBudget}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="projectCategoryName" label="项目类型" align="center">
                    <template slot-scope="scope">
                        <span>{{getProjectName(scope.row.projectCategoryName)}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="capitalSource" label="资金来源" align="center"></el-table-column>
                <el-table-column prop="submitTime" sortable="custom" label="上报时间" align="center"></el-table-column>
                <el-table-column prop="currentState" label="审批状态" align="center">
                    <template slot-scope="scope">
                        <span>{{statusFilter(scope.row.currentState)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-link
                            type="primary"
                            @click="handleClick(scope.row, 'view')"
                            size="small"
                        >查看</el-link>
                        <template v-if="scope.row.currentState == 1">
                            <el-divider direction="vertical"></el-divider>
                            <el-link
                                type="primary"
                                @click="handleClick(scope.row, 'edit')"
                                size="small"
                            >编辑</el-link>
                        </template>
                        <template v-if="scope.row.currentState == 1">
                            <el-divider direction="vertical"></el-divider>
                            <el-link
                                type="primary"
                                @click="handleClick(scope.row, 'submit')"
                                size="small"
                            >提交</el-link>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageData.pageTotal"
                ></el-pagination>
            </div>
        </div>
        <el-dialog title="选择代办人" :visible.sync="isShowUserDialog" width="40%">
            <el-table :data="peopleList" @row-click="setNextUser">
                <el-table-column label="姓名" prop="name"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
/* eslint-disable */
export default {
    data() {
        return {
            isShowUserDialog: false,
            peopleList: [],
            options: [
                {
                    value: 1,
                    label: "草稿"
                },
                {
                    value: 2,
                    label: "已提交"
                },
                {
                    value: 3,
                    label: "规划处确认"
                },
                {
                    value: 4,
                    label: "规划处联合会商"
                },
                {
                    value: 5,
                    label: "市领导审定"
                },
                {
                    value: 6,
                    label: "申报通过"
                },
                {
                    value: 7,
                    label: "申报不通过"
                }
            ],
            currentPage: 1,
            searchForm: {},
            searchTime: [],
            pickerOptions: {
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        }
                    }
                ]
            },
            tableData: [],
            pageData: {
                pageNum: 1,
                pageSize: 10,
                pageTotal: 0
            },
            formData: {} // 当前操作的数据
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        statusFilter(val) {
            switch (val) {
                case 1:
                    return "草稿";
                case 2:
                    return "已提交";
                case 3:
                    return "规划处确认";
                case 4:
                    return "规划处联合会商";
                case 5:
                    return "市领导审定";
                case 6:
                    return "申报通过";
                case 7:
                    return "申报不通过";
            }
        },
        getProjectName(_state) {
            let state = Number(_state);
            let stateStr = "";
            if (state === 1) {
                stateStr = "全市发展规划";
            } else if (state === 2) {
                stateStr = "专项发展规划";
            } else if (state === 3) {
                stateStr = "软件开发";
            } else if (state === 4) {
                stateStr = "系统集成";
            } else if (state === 5) {
                stateStr = "民政局";
            } else if (state === 6) {
                stateStr = "公安局";
            } else if (state === 7) {
                stateStr = "财政局";
            } else if (state === 8) {
                stateStr = "国税局";
            } else if (state === 9) {
                stateStr = "土地局";
            }
            return stateStr;
        },
        // 选中代办人
        setNextUser(row) {
            this.formData.nextUserId = row.jfId;
            this.formData.currentState = 2;

            this.axios.post("/projectTrial/update", this.formData).then(res => {
                if (res.code == 1000) {
                    this.$message.success("操作成功!");
                    this.getList();
                    this.isShowUserDialog = false;
                }
            });
        },
        // 提交获取详情
        getDetail(id) {
            this.axios
                .get("/projectTrial/getOne", { params: { id } })
                .then(res => {
                    this.formData = res.data;
                    // 提交
                    this.isShowUserDialog = true;
                    this.ajaxGetPeople();
                });
        },
        // 提交之后获取代办人数据
        ajaxGetPeople() {
            this.axios.get("/role/findMembersByBuid/test").then(res => {
                if (res.code !== 1000) {
                    this.$message.error(res.message);
                    return;
                }
                this.peopleList = res.data.data.list;
            });
        },
        getList(page) {
            if (page) {
                this.pageData.pageNum = page;
            }
            let params = Object.assign(this.pageData, this.searchForm);
            if (this.searchTime && this.searchTime.length > 0) {
                params["planBeginTime"] = this.searchTime[0];
                params["planEndTime"] = this.searchTime[1];
            }
            this.axios.get("/projectTrial/getList", { params }).then(res => {
                this.tableData = res.data.records;
                this.pageData.pageTotal = res.data.total;
            });
        },
        handleClick(row, type) {
            if (type == "view") {
                this.$router.push({
                    name: "companyDetail",
                    query: { id: row.trialId, pid: row.processInstanceIdCs }
                });
            } else if (type == "edit") {
                this.$router.push({
                    name: "addCompany",
                    query: { id: row.trialId }
                });
            } else if (type == "submit") {
                this.getDetail(row.trialId);
            }
        },
        handleSizeChange(value) {
            this.pageData.pageSize = value;
            this.getList();
        },
        handleCurrentChange(value) {
            this.getList(value);
        },
        add() {
            this.$router.push({ name: "addCompany" });
        },
        resetForm(formName) {
            this.searchTime = [];
            this.searchForm = {};
        },
        onSortChange(target) {
            const { order, prop } = target;
            if (prop === "projectBudget") {
                if (order === "ascending") {
                    this.searchForm.orderFlag = 1;
                } else if (order === "descending") {
                    this.searchForm.orderFlag = 2;
                } else {
                    this.searchForm.orderFlag = "";
                }
            }
            this.page = 1;
            this.getList();
        }
    }
};
</script>

<style lang="less" scoped>
.chushe {
    .serach {
        padding-top: 20px;
        display: flex;
        .serachBtn {
            padding: 20px 0;
            width: 158px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #edf0fa;
        }
        .serachForm {
            padding: 20px 0;
            flex: 1;
            background-color: #fff;
        }
    }
    .el-input--small {
        width: 176px !important;
    }

    .container {
        margin-top: 20px;
        padding: 20px;
        background-color: #fff;
        .addBtn {
            margin-bottom: 20px;
        }
        .page {
            padding-top: 20px;
            text-align: right;
        }
    }
}
</style>
